<template>
  <div id="userManagePage">
    <!-- 搜索框   -->
    <a-form layout="inline" :model="searchParams" @finish="doSearch">
      <a-form-item>
        <a-input
          v-model:value="searchParams.name"
          placeholder="用户名"
          style="width: 120px"
          :allow-clear="true"
        />
      </a-form-item>
      <a-form-item>
        <a-select
          v-model:value="searchParams.status"
          placeholder="状态"
          style="width: 120px"
          :allow-clear="true"
        >
          <a-select-option value="Approved">Approved</a-select-option>
          <a-select-option value="Rejected">Rejected</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item>
        <a-input
          v-model:value="searchParams.keyword"
          placeholder="关键字"
          style="width: 200px"
          :allow-clear="true"
        />
      </a-form-item>

      <a-form-item>
        <a-button type="primary" html-type="submit">搜索</a-button>
      </a-form-item>
    </a-form>
    <div style="margin-bottom: 16px" />
    <!--表格-->
    <a-table
      :columns="columns"
      :data-source="dataList"
      :pagination="pagination"
      @change="doTableChange"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'avatar'">
          <a-image :src="record.avatar" :width="50" />
        </template>
        <template v-else-if="column.dataIndex === 'role'">
          <div v-if="record.role === 'admin'">
            <a-tag color="green">管理员</a-tag>
          </div>
          <div v-else>
            <a-tag color="red">普通用户</a-tag>
          </div>
        </template>

        <template v-else-if="column.dataIndex === 'gender'">
          <div v-if="record.gender === 'Male'">
            <a-tag color="blue">
              <ManOutlined />
            </a-tag>
          </div>
          <div v-else-if="record.gender === 'Female'">
            <a-tag color="red">
              <WomanOutlined />
            </a-tag>
          </div>
          <div v-else>
            <a-tag color="yellow">
              <LineOutlined />
            </a-tag>
          </div>
        </template>

        <template v-if="column.dataIndex === 'createTime'">
          {{ dayjs(record.createTime).format('YYYY-MM-DD HH:mm:ss') }}
        </template>

        <template v-else-if="column.dataIndex === 'status'">
          <div v-if="record.status === 'Approved'">
            <a-tag color="green">Approved</a-tag>
          </div>
          <div v-else-if="record.status === 'Rejected'">
            <a-tag color="red">Rejected</a-tag>
          </div>
        </template>

        <template v-else-if="column.key === 'action'">
          <a-popconfirm
            title="确定要删除这个用户吗？"
            ok-text="确认"
            cancel-text="取消"
            @confirm="doDelete(record.id)"
          >
            <a-button danger>删除</a-button>
          </a-popconfirm>
        </template>
      </template>
    </a-table>
  </div>
</template>
<script lang="ts" setup>
import { computed, onMounted, reactive, ref } from 'vue'
import { ManOutlined, WomanOutlined, LineOutlined } from '@ant-design/icons-vue'
import { deleteUser, pageUser } from '@/api/userController.ts'
import { message } from 'ant-design-vue'
import dayjs from 'dayjs'

const columns = [
  {
    title: '序号',
  },
  {
    title: '账号',
    dataIndex: 'account',
  },
  {
    title: '用户名',
    dataIndex: 'name',
  },
  {
    title: '性别',
    dataIndex: 'gender',
  },
  {
    title: '头像',
    dataIndex: 'avatar',
  },
  {
    title: '邮箱',
    dataIndex: 'email',
  },
  {
    title: '手机号',
    dataIndex: 'phone',
  },
  {
    title: '简介',
    dataIndex: 'profile',
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
  },
  {
    title: '用户状态',
    dataIndex: 'status',
  },
  {
    title: '操作',
    key: 'action',
  },
]

// 定义数据
const dataList = ref<API.UserVo[]>()
const total = ref(0)

// 搜索条件
const searchParams = reactive<API.UserPageRequest>({
  pageNum: 1,
  pageSize: 10,
})

// 获取数据
const fetchData = async () => {
  const res = await pageUser({ ...searchParams })
  if (res.data.code === 0 && res.data.data) {
    dataList.value = res.data.data.list ?? []
    total.value = res.data.data.totalCount ?? 0
  } else {
    message.error('获取用户列表失败：' + res.data.message)
  }
}

// 页面加载时获取数据，请求一次
onMounted(() => {
  fetchData()
})

// 分页参数
const pagination = computed(() => {
  return {
    pageNum: searchParams.pageNum,
    pageSize: searchParams.pageSize,
    total: total.value,
    showSizeChanger: true,
    showTotal: (total: number) => `共 ${total} 条`,
  }
})

// 表格变化之后，重新获取数据
const doTableChange = (page: any) => {
  searchParams.pageNum = page.current
  searchParams.pageSize = page.pageSize
  fetchData()
}

// 搜索数据
const doSearch = () => {
  // 重置页码
  searchParams.pageNum = 1
  fetchData()
}

// 删除数据
const doDelete = async (id: number) => {
  if (!id) {
    message.error('请选择要删除的用户')
  }
  const res = await deleteUser({ id })
  if (res.data.code === 0) {
    message.success('操作成功')
    // 刷新数据
    await fetchData()
  } else {
    message.error('操作失败：' + res.data.message)
  }
}
</script>
